<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>

    <title>天天放心购－商品详情</title>
    <link rel="stylesheet" th:href="@{/css/reset.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/main.css}" type="text/css">
    <script th:src="@{/js/jquery-1.12.4.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/shop_message.js}" type="text/javascript"></script>
    <script th:src="@{/js/config.js}" type="text/javascript"></script>

    <style>
        .tab_content dl dd ul {
            margin: 0px;
            padding: 20px 0px 0px;
            list-style: none;
            overflow: hidden;
            color: #666666;
            font-family: tahoma, arial, & #39, Microsoft YaHei & #39, & #39, Hiragino Sans GB & #39, u5b8bu4f53, sans-serif;
        }

        .tab_content dl dd ul li {
            margin: 0px 0px 5px;
            padding: 0px 0px 0px 42px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 200px;
            float: left;
        }
    </style>
</head>
<body>

<!--头部  开始-->
<div th:include="~{global/header :: header}"></div>
<!--头部 结束-->

<div class="search_bar clearfix">
    <a class="logo fl" th:href="@{/}"><img th:src="@{/images/logo.png}"></a>
    <div th:include="~{global/search :: search}"></div>
    <div th:if="${login}!=null">
        <input id="tag" th:value="${login.uId}" type="hidden">
    </div>
    <div th:include="~{global/carCount :: carCount}"></div>
</div>
</div>

<div class="navbar_con">
    <div class="navbar clearfix">
        <div class="subnav_con fl">
            <h1>全部商品分类</h1>
            <span></span>
            <ul class="subnav">
                <li><a class="fruit" href="#">新鲜水果</a></li>
                <li><a class="seafood" href="#">海鲜水产</a></li>
                <li><a class="meet" href="#">猪牛羊肉</a></li>
                <li><a class="egg" href="#">禽类蛋品</a></li>
                <li><a class="vegetables" href="#">新鲜蔬菜</a></li>
                <li><a class="ice" href="#">速冻食品</a></li>
            </ul>
        </div>
        <ul class="navlist fl">
            <li><a th:href="@{/index}">首页</a></li>
            <li class="interval">|</li>
            <li><a href="#">手机生鲜</a></li>
            <li class="interval">|</li>
            <li><a href="#">抽奖</a></li>
        </ul>
    </div>
</div>

<div class="breadcrumb">
    <a th:href="@{/index}">全部分类</a>
    <span>&gt;</span>
    <a href="#">新鲜水果</a>
    <span>&gt;</span>
    <span>商品详情</span>
</div>

<div class="goods_detail_con clearfix">
    <div class="goods_detail_pic fl"><img th:src="@{'/images/所有商品/'+${produce.img}}"></div>

    <div class="goods_detail_list fr">
        <input hidden type="text" id="producePid" th:value="${produce.pId}">
        <input hidden type="text" id="shortName" th:value="${produce.shortName}">
        <h3 th:text="${produce.productName}"> 越南进口红心火龙果 3个装 大果 单果约450~500g </h3>
        <p th:text="${produce.indroduce}">越南直采 精选大果】果肉更足，享受饱满的甜蜜诱惑！红果富含花青素，天然抗氧化营养库！泰国金枕榴莲火爆促销中，点我直达，萨瓦迪卡。</p>
        <div class="prize_bar">
            <span class="show_pirze">¥<em id="danjia" th:text="${produce.price}">33.90</em></span>
            <span class="show_unit" th:text="'单位'+${produce.weight}+${produce.unit}">单  位：1.94kg</span>
        </div>
        <div class="goods_num clearfix">
            <div class="num_name fl">数 量：</div>
            <div class="num_add fl">
                <input class="num_show fl" id="shuliang" min="1" type="text" value="1">
                <a class="add fr" href="javascript:;" id="jiahao">+</a>
                <a class="minus fr" href="javascript:;" id="jianhao">-</a>
            </div>
        </div>
        <div class="total">总价：<em id="zongjia" th:text="${produce.price}">33.90</em>元</div>
        <div class="operate_btn">
            <a class="buy_btn" href="javascript:;" id="buy_btn">立即购买</a>
            <a class="add_cart" id="add_cart">加入购物车</a>
        </div>
    </div>
</div>

<div class="main_wrap clearfix">
    <div class="l_wrap fl clearfix">
        <div class="new_goods">
            <h3>新品推荐</h3>
            <ul>
                <li>
                    <a href=""><img th:src="@{/images/所有商品/57ab290aN34f76b37.jpg}"></a>
                    <h4><a th:href="@{/produce/shop_message}"> 越南进口红心火龙果 3个装 大果 单果约450~500g </a></h4>
                    <div class="prize">￥33.90</div>
                </li>

                <li>
                    <a href=""><img th:src="@{/images/所有商品/5b4871e6N072f0d74.jpg}"></a>
                    <h4><a th:href="@{/produce/shop_message}">寻天果蔬 泰国山竹水果 京东生鲜 5A级 热带水果 2.5k</a></h4>
                    <div class="prize">￥98.00</div>
                </li>
            </ul>
        </div>
    </div>

    <div class="r_wrap fr clearfix">
        <ul class="detail_tab clearfix">
            <li class="active">商品介绍</li>
            <li>评论</li>
        </ul>

        <div class="tab_content">
            <dl>
                <dt>商品详情：</dt>
                <dd>
                    <ul class="p-parameter-list" id="parameter-brand">
                        <li title="京东生鲜">品牌：&nbsp;<span style="color: #5e69ad;">京东生鲜</span></li>
                    </ul>
                    <ul class="parameter2 p-parameter-list">
                        <li th:text="'商品名称:'+${produce.shortName}">商品名称：京东生鲜越南进口 红心火龙果3个装 单果约500g</li>
                        <li th:text="'商品编号:'+${produce.pId}" title="3048509">商品编号：3048509</li>
                        <li th:text="'商品毛重:'+${produce.weight}+${produce.unit}" title="1.94kg">商品毛重：1.94kg</li>
                        <li th:text="'商品产地:'+${produce.born}" title="越南">商品产地：越南</li>
                        <li th:text="'重量:'+${produce.weightInterval}" title="1kg-2kg">重量：1kg-2kg</li>
                        <li th:text="'国产/进口:'+${produce.isImport}" title="进口">国产/进口：进口</li>
                        <li th:text="'包装:'+${produce.packaging}" title="简装">包装：简装</li>
                    </ul>
                </dd>
            </dl>
        </div>

    </div>
</div>
<script type="text/javascript">

    let pending = false;

    $.ready(function () {
        console.log($('#tag').val());
    });


    $("#buy_btn").click(function () {
        alert("sadsa");
        var shortName = $("#shortName").val();
        var price = parseFloat($("#zongjia").html());
        var num = $("#shuliang").val();
        $.ajax({
            type: "POST",
            url: "/customer/buy",
            contentType: "application/x-www-form-urlencoded",
            dataType: "json",
            data: {shortName: shortName, total: price, num: num},
            success: function (res) {
                if(res.code == 200){
                    alert("购买成功！");
                    return;
                }
                alert(res.message);
            },
            error: function (){
                alert("请求出错！");
                return;
            }
        })
    });

    $("#add_cart").click(function () {
        if (pending) {
            return;
        }
        console.log(11111111111111111111111111111111111)
        pending = true;
        var producePid = $('#producePid').val();
        var produceCount = $("#shuliang").val();
        $.ajax({
            url: Config.getUrlPreFix() + '/user/car/addProduce',
            contentType: "application/x-www-form-urlencoded",
            method: "POST",
            dataType: "json",
            data: {
                id: producePid,
                count: produceCount
            },
            success: function (res) {
                console.log(22222222222222222222222);
                if (res.code == 200) {
                    alert('添加购物车成功！');
                    window.location.href = Config.getUrlPreFix() + '/produce/message?id=' + producePid;
                    return;
                }
                alert(res.message);
            },
            // 失败： 提示错误信息
            error: function () {
                console.log(333333333333333333333);
                alert("请求出错！");
                return
            },
            complete() {
                pending = false;
            }

        })


    })
</script>
<div th:include="~{global/header :: footer}"></div>


<div class="add_jump"></div>

</body>
</html>

